<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h1>用户列表</h1>
        <div id="box">
            <h2>当前用户：</h2>
            <h2 id="nowuser">未登录</h2>
        </div>
        <table border="1" style="width: 1200px">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>邮箱</th>
                    <th>注册时间</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </body>
    <script>
        window.onload = function () {
            if (document.referrer.includes('index.html')) {
                let search = window.location.search
                nowuser.innerHTML = search.split('=')[1]
                getUserList()
            } else {
                alert('请先登录')
                window.location.href = 'login.html'
            }
        }
        // created_at: null
        // email: 'qweq'
        // id: 891
        // name: 'zhangsan'
        // password: '123456'
        // updated_at: null
        function getUserList() {
            let xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let res = JSON.parse(xhr.responseText)
                    console.log(res)
                    let html = ''
                    res.data.forEach((item, index) => {
                        html += `<tr>
                                    <td>${item.id}</td>
                                    <td>${item.name}</td>
                                    <td>${item.password}</td>
                                    <td>${item.email}</td>
                                    <td>${item.created_at}</td>
                                    <td>${item.updated_at}</td>
                                    <td><button>查看</button></td>
                                </tr>`
                    })
                    document.querySelector('tbody').innerHTML = html
                }
            }
            xhr.open('get', 'https://liu.zzgoodqc.cn/users', true)
            xhr.send()
        }
    </script>
</html>
